<template>
    <el-dialog :model-value="showAddVideoVisible" :title="props.editInfo.id ? '编辑图文' : '新增图文'" width="700"
        :close-on-click-modal="false" @close="resetForm" class="custom-scroll-dialog">
        <div class="dialog-scroll-content">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto">
                <el-form-item label="排序" prop="sort">
                    <el-input v-model="ruleForm.sort" />
                </el-form-item>
                <el-form-item label="图文标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请输入图文标题" />
                </el-form-item>

                <el-form-item label="描述" prop="subtitle">
                    <el-input type="textarea" v-model="ruleForm.subtitle" placeholder="请输入描述" />
                </el-form-item>
                <el-form-item label="发布人" prop="publisher">
                    <el-input v-model="ruleForm.publisher" placeholder="请输入发布人" />
                </el-form-item>
                <!-- <el-form-item label="图文标签" prop="label">
                    <el-input v-model="ruleForm.label" placeholder="多个标签请用逗号分隔" />
                </el-form-item> -->

                <el-form-item label="图文封面">
                    <el-input v-model="ruleForm.coverUrl" style="display: none"></el-input>
                    <div class="avatar-uploader" @click="showImageChooseDialog = true">
                        <el-image v-if="ruleForm.coverUrl" :src="ruleForm.coverUrl" class="avatar"
                            fit="contain"></el-image>
                        <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                                <Plus />
                            </el-icon></i>
                        <div v-if="ruleForm.coverUrl" class="mask">替换</div>
                        <el-icon v-if="ruleForm.coverUrl" class="del-image" :size="20" @click.stop="handleDelImg">
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                </el-form-item>

                <el-form-item label="图文详情">
                    <ArtWangEditor v-model="ruleForm.content" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
            </el-form>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" :loading="editLoading" @click="submitForm(ruleFormRef)">确认</el-button>
                <el-button @click="resetForm">取消</el-button>
            </div>
        </template>
    </el-dialog>
    <image-selected-dialog v-if="showImageChooseDialog" :single-type="selectImageSingle"
        :show-image-choose-dialog="showImageChooseDialog" @close-dialog="handleCloseImageDialog"
        :operationType="false"></image-selected-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { useUserStore } from '@/store/modules/user'
import { addArticleList, editArticleList } from '@/api/questionbank'
import { Plus } from '@element-plus/icons-vue'
import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

const userStore = useUserStore()

const props = defineProps({
    showAddVideoVisible: {
        type: Boolean
    },
    editInfo: {
        type: Object,
        default: () => {
            return {
                id: ''
            }
        }
    },
    groupInfo: {
        type: Object,
        default: () => {
            return {
                id: ''
            }
        }
    }
})

const emit = defineEmits(['closeDialog'])

const editLoading = ref(false)
interface RuleForm {
    sort: number
    title: string
    coverUrl: string
    publisher: string
    subtitle: string
    content: string,
    status: number
}

const ruleFormRef = ref<FormInstance>()
let loadingMessage: ReturnType<typeof ElMessage> | null = null

const ruleForm = reactive<RuleForm>({
    sort: 1,
    title: '',
    coverUrl: '',
    subtitle: '',
    publisher: '',
    content: '',
    status: 1
})

const showImageChooseDialog = ref(false)
const selectImageSingle = ref(true)
const showVideoChooseDialog = ref(false)
const handleCloseImageDialog = (value: any) => {
    if (value && value.fileUrl) { ruleForm.coverUrl = value.fileUrl }
    showImageChooseDialog.value = false
}


const handleDelImg = () => {
    ruleForm.coverUrl = ''
}

const rules = reactive<FormRules<RuleForm>>({
    title: [{ required: true, message: '不能为空', trigger: 'blur' }],
    subtitle: [{ required: true, message: '不能为空', trigger: 'blur' }],
    // answer: [{ required: true, message: '不能为空', trigger: 'blur' }],
    // videoUrl: [{ required: true, message: '不能为空', trigger: 'blur' }],
    // isPay: [{ required: true, message: '不能为空', trigger: 'change' }]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        if (valid) {
            if (props.editInfo.id) {
                handleEdit()
            } else {
                handleAdd()
            }
        } else {
        }
    })
}

async function handleAdd() {
    try {
        editLoading.value = true
        const res = await addArticleList({
            ...ruleForm,
            groupId: props.groupInfo.id
        })
        if (res.code === '00000') {
            emit('closeDialog', true)
            ElMessage.success('新增成功')
        }
    } catch (e) {
    } finally {
        editLoading.value = false
    }
}

async function handleEdit() {
    try {
        editLoading.value = true
        const res = await editArticleList(props.editInfo.id, {
            ...ruleForm
        })
        if (res.code === '00000') {
            emit('closeDialog', true)
            ElMessage.success('编辑成功')
        }
    } catch (e) {
    } finally {
        editLoading.value = false
    }
}

const resetForm = () => {
    emit('closeDialog')
}
onMounted(() => {
    if (props.editInfo.id) {
        ruleForm.sort = props.editInfo.sort
        ruleForm.status = props.editInfo.status
        ruleForm.title = props.editInfo.title
        ruleForm.coverUrl = props.editInfo.coverUrl
        ruleForm.subtitle = props.editInfo.subtitle
        ruleForm.content = props.editInfo.content
        ruleForm.publisher = props.editInfo.publisher
    }
})
</script>

<style scoped lang="scss">
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;

    .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: #fff;
        font-size: 12px;
    }

    .del-image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #8c939d;
    }

    &:hover .mask {
        opacity: 1;
    }

    &:hover .del-image {
        display: block;
    }
}

.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.custom-scroll-dialog .dialog-scroll-content {
    max-height: 850px;
    overflow-y: auto;
    /* 可根据需要调整max-height */
}
</style>